<template>
    <div>
        <div style="margin: 10px 0">
            <div>
                <el-select v-model="containerType" placeholder="请输入集装箱类型">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="destination" placeholder="请输入目的地/来源地" class="ml-5">
                    <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
                <el-button type="warning" @click="reset">重置</el-button>
            </div>

        </div>
        <el-row>
            <el-col :span="24">
                <div id="yard1" style="width: 500px; height: 400px"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        name: "SingleYard",
        data() {
            return {
                containerType: "",
                destination: "",
                options: [{
                    value: '普通箱',
                    label: '普通箱'
                }, {
                    value: '空箱',
                    label: '空箱'
                }, {
                    value: '重箱',
                    label: '重箱'
                }, {
                    value: '冷冻箱',
                    label: '冷冻箱'
                }, {
                    value: '危险箱',
                    label: '危险箱'
                }, {
                    value: '超重箱',
                    label: '超重箱'
                }],
                options2: [{
                    value: '亚洲',
                    label: '亚洲'
                }, {
                    value: '美洲',
                    label: '美洲'
                }, {
                    value: '欧洲',
                    label: '欧洲'
                }],
            }
        },
        mounted() {
            this.load()
        },
        methods: {
            load() {
                var chartDom1 = document.getElementById('yard1');
                var myChart1 = echarts.init(chartDom1);
                var option1;

                // prettier-ignore
                const columns1 = [
                    '1', '2', '3', '4', '5', '6'
                ];
                // prettier-ignore
                const rows1 = [
                    '1', '2', '3'
                ];
                // prettier-ignore
                const data1
                    = []
                    .map(function (item) {
                        return [item[1], item[0], item[2] || '-'];
                    });
                option1 = {
                    title: {
                        text: this.containerType && this.destination ? this.containerType + ", " + this.destination : "演示画面",
                        left: 'center'
                    },
                    tooltip: {
                        position: 'top'
                    },
                    grid: {
                        height: '50%',
                        top: '10%'
                    },
                    xAxis: {
                        type: 'category',
                        data: columns1,
                        splitArea: {
                            show: true
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: rows1,
                        splitArea: {
                            show: true
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: 3,
                        calculable: true,
                        orient: 'horizontal',
                        left: 'center',
                        bottom: '15%'
                    },
                    series: [
                        {
                            name: 'Punch Card',
                            type: 'heatmap',
                            data: data1,
                            label: {
                                show: true
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                this.request.get("/echarts/singleYard", {
                    params: {
                        containerType: this.containerType,
                        destination: this.destination
                    }
                }).then(res => {
                    option1.series[0].data = [
                        res.data[0],
                        res.data[1],
                        res.data[2],
                        res.data[3],
                        res.data[4],
                        res.data[5],
                        res.data[6],
                        res.data[7],
                        res.data[8],
                        res.data[9],
                        res.data[10],
                        res.data[11],
                        res.data[12],
                        res.data[13],
                        res.data[14],
                        res.data[15],
                        res.data[16],
                        res.data[17],
                    ]
                    myChart1.setOption(option1)
                })
            },
            reset() {
                this.containerType = ""
                this.destination = ""
                this.load()
            }
        }
    }
</script>

<style scoped>

</style>